<template>
    <div class="info-content">
        <vuedraggable v-model="list.data" tag="ul" draggable="li" class="image-list">
            <li v-for="(item, index) in list.data" :key="index">
                <div class="l-info">
                    <el-form label-width="150px">
                        <el-form-item label="二维码高度：">
                            <el-slider vertical v-model.number="item.top" :max="100" :min="0" height="200px">
                            </el-slider>
                        </el-form-item>
                        <el-form-item label="二维码位置：">
                            <el-slider v-model.number="item.left" :max="100" :min="0">
                            </el-slider>
                        </el-form-item>
                        <el-form-item label="大小：">
                            <el-slider v-model.number="item.size" :max="300" :min="0">
                            </el-slider>
                        </el-form-item>
                        <el-form-item label="二维码背景颜色：">
                            <el-color-picker v-model="item.bgcolor" show-alpha></el-color-picker>
                        </el-form-item>
                        <el-form-item label="字体颜色">
                            <el-color-picker v-model="item.fontColor" show-alpha></el-color-picker>
                        </el-form-item>
                    </el-form>

                </div>
                <div class="r-image">
                    <span @click="removeImage(index)" class="el-icon-close"></span>
                    <div class="image-box">
                        <img :src="item && item.url" />
                        <span @click="setImage(index)" class="el-icon-edit-outline"></span>
                    </div>
                </div>
            </li>
        </vuedraggable>
        <template v-if="list.data.length < len">
            <el-button type="primary" icon="el-icon-plus" @click="addImage(-1)" class="add-image">
                添加图片
            </el-button>
        </template>
        <!-- <div class="beizhu">首页弹窗图片不能视频同时存在</div> -->
        <el-upload ref="upload" :http-request="upload" :show-file-list="false" multiple action style="display: none">
        </el-upload>
    </div>
</template>

<script>
import vuedraggable from "vuedraggable";

export default {
    name: "sharebg",
    components: { vuedraggable },
    props: ["data", "className"],
    data() {
        return {
            list: {
                data: [],
                time: 3,
            },
            imageIndex: 0,
            len: 10
        };
    },

    mounted() {
        console.log(this.data, "this.data")
        this.list = this.data;
    },
    methods: {
        removeImage(index) {
            this.list.data.splice(index, 1);
        },
        addImage(index) {
            this.isSet = true
            this.imageIndex = index;
            this.$refs["upload"].$children[0].$refs.input.click();
        },
        setImage(index) {
            this.imageIndex = index;
            this.$refs["upload"].$children[0].$refs.input.click();
            this.isSet = false
        },
        upload(params) {
            let that = this;
            const len = this.list.data.length;

            if (len >= this.len && this.isSet) {
                this.$message.error(`最多添加${this.len}张图片!`);
                return;
            }
            const file = params.file,
                fileType = file.type;

            const verifyList = [
                {
                    text: "只能上传图片格式png、jpg、gif!",
                    result: fileType.indexOf("image") != -1,
                },
                {
                    text: "只能上传大小小于5M",
                    result: file.size / 1024 / 1024 < 5,
                },
            ];

            for (let item of verifyList) {
                if (!item.result) {
                    this.$message.error(item.text);
                    return;
                }
            }
            let types = params.file.name.split(".")
            let key = new Date()
            key = that.$template + '/' + key.getTime() + "." + types[types.length - 1]
            const form = new FormData();
            form.append("file", file);
            form.append("clientType", "multipart/form-data");
            form.append("key", key);
            this.getToken().then(
                (res) => {
                    form.append("token", res.data.token);
                    that
                        .$http({
                            url: res.data.upload,
                            method: "post",
                            headers: {
                                "Content-Type": "multipart/form-data",
                                token: res.data.token,
                            },
                            data: form,
                            dataType: "json",
                            cache: false, //上传文件无需缓存
                            processData: false, //用于对data参数进行序列化处理 这里必须false
                            contentType: false, //必须
                        })
                        .then((ress) => {
                            const index = that.imageIndex;
                            const data = {
                                name: index >= 0 ? that.list.data[index].name : "",
                                url: res.data.url + key,
                                link: index >= 0 ? that.list.data[index].link : "",
                                form,
                            };
                            if (index !== -1) {
                                that.$set(that.list.data, index, data);
                            } else {
                                that.list.data.push(data);
                            }
                        });
                },
                function () {
                    console.log("请求失败处理");
                }
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.info-content {
    padding: 20px;
    overflow-y: scroll;
}

.beizhu {
    color: red;
    font-weight: bold;
    font-size: 14px;
    display: flex;
    justify-content: center;
}

.image-list {
    margin: 0;
    padding: 0 10px;
    overflow: auto;

    &::-webkit-scrollbar-thumb {
        background: #dbdbdb;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
        background: #f6f6f6;
        border-radius: 10px;
    }

    &::-webkit-scrollbar {
        width: 6px;
    }

    li {
        list-style: none;
        background: #f7f8f9;
        border-radius: 4px;
        padding: 6px 14px 10px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        &.disable div {
            pointer-events: none;
            user-select: none;
        }

        .l-info {
            font-size: 12px;
            padding-top: 8px;
            width: calc(100% - 70px);

            p {
                margin: 12px 0 0;
                white-space: nowrap;
                overflow: hidden;
                display: flex;

                .link {
                    color: #1b8bff;
                    cursor: pointer;
                }

                .text {
                    white-space: nowrap;
                    text-align: -webkit-auto;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    cursor: pointer;
                    color: #1b8bff;
                }
            }
        }

        .r-image {
            text-align: right;

            .el-icon-close {
                color: #999;
                font-size: 12px;
                font-weight: 600;
                margin-bottom: 6px;
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }

            .image-box {
                width: 70px;
                height: 70px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;
                background: #fff;
                display: flex;
                justify-content: center;
                align-items: center;

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.5);
                    opacity: 0;
                    transition: all 0.3s;
                }

                span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    color: #fff;
                    transform: translate(-50%, -50%);
                    font-size: 20px;
                    cursor: pointer;
                    opacity: 0;
                    transition: all 0.3s;
                }

                img {
                    max-width: 100%;
                }

                &:hover {

                    &::before,
                    span {
                        opacity: 1;
                    }
                }
            }
        }
    }
}
</style>